import {createSlice} from '@reduxjs/toolkit';
//定义todos的初始状态
const initialState = [
    {id:1,text:'react',completed:false},
    {id:2,text:'toolkit',completed:true}
]
//调用createSlice方法创建一个名为todos的状态切片对象
const todosSlice = createSlice({
    name:'todosName',//状态切片的名字 dva中的namespace
    initialState,//初始的状态
    reducers:{//dva很像
        //reducers对象属性就是actionType,值一个计算新状态的函数,参数1是老状态，参数2是派发的动作
        addTodo:(state,action)=>{//增加一个TODO
            //action.payload就是派发的动作携带的参数，也不是派发时传递的数据
            const todo = action.payload;//{id,text}
            //把此新的的todo添加到状态中，todos这个状态是一个数组
            state.push({...todo,id:state.length+1,completed:false});
        },
        toggleTodo:(state,action)=>{//切换TODO的完成状态
            //payload指的是你要切换哪个todo的完成状态
            const id = action.payload;
            //按此ID到数组里查找要修改的todo
            const todo = state.find(todo=>todo.id === id);
            //如果找到，切换此ID对应的todo完成状态，为相反状态
            if(todo){
                todo.completed = !todo.completed;
            }
        }
    }
});
//actionCreators = actions
//是一个对象，对象每个属性都是一个actionCreator
export const {addTodo,toggleTodo} = todosSlice.actions;
//把此切片对象中的reducer函数默认导出,以便 在创建仓库的时候使用
export default todosSlice.reducer;
/**
 * 以前定义actionTypes
 * 定义reducers
 * 定义actions
 * 都不再需要了
 * 只要通过createSlice创建一个状态切片，reducer和actionCreator都可以自动生成
 */